// 柱状图示例数据
export const barChartData = {
  xAxis: {
    type: "category",
    data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      name: "销售额",
      type: "bar",
      data: [120, 200, 150, 80, 70, 110, 130],
      itemStyle: {
        color: "#1890ff"
      },
      label: {
        show: true,
        position: "top",
        formatter: "{c}",
        color: "#fff"
      }
    },
    {
      name: "利润",
      type: "bar",
      data: [60, 80, 75, 40, 35, 55, 65],
      itemStyle: {
        color: "#52c41a"
      },
      label: {
        show: true,
        position: "top",
        formatter: "{c}",
        color: "#fff"
      }
    }
  ]
};

// 折线图示例数据
export const lineChartData = {
  legend: {
    padding: [
      30, // 上
      5, // 右
      5, // 下
      5 // 左
    ],
    textStyle: {
      color: "#fff"
    }
  },
  xAxis: {
    type: "category",
    data: [
      "1月",
      "2月",
      "3月",
      "4月",
      "5月",
      "6月",
      "7月",
      "8月",
      "9月",
      "10月",
      "11月",
      "12月"
    ]
  },
  yAxis: {
    type: "value"
  },
  series: [
    {
      name: "今年",
      type: "line",
      data: [820, 932, 901, 934, 1290, 1330, 1320, 1250, 1100, 950, 900, 980],
      smooth: true,
      lineStyle: {
        width: 3,
        color: "#5470c6"
      },
      areaStyle: {
        opacity: 0.5,
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(84, 112, 198, 0.5)"
            },
            {
              offset: 1,
              color: "rgba(84, 112, 198, 0.1)"
            }
          ]
        }
      }
    },
    {
      name: "去年",
      type: "line",
      data: [620, 732, 701, 734, 1090, 1130, 1120, 1150, 900, 750, 800, 880],
      smooth: true,
      lineStyle: {
        width: 3,
        color: "#91cc75"
      },
      areaStyle: {
        opacity: 0.5,
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "rgba(145, 204, 117, 0.5)"
            },
            {
              offset: 1,
              color: "rgba(145, 204, 117, 0.1)"
            }
          ]
        }
      }
    }
  ]
};

// 饼图示例数据
export const pieChartData = {
  tooltip: {
    trigger: "item"
  },
  legend: {
    orient: "vertical",
    left: "left"
  },
  series: [
    {
      name: "产品销量",
      type: "pie",
      radius: "70%",
      center: ["50%", "60%"],
      data: [
        { value: 1048, name: "产品A" },
        { value: 735, name: "产品B" },
        { value: 580, name: "产品C" },
        { value: 484, name: "产品D" },
        { value: 300, name: "产品E" }
      ],
      roseType: "radius",
      label: {
        formatter: "{b}: {d}%"
      },
      itemStyle: {
        borderRadius: 8
      },
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)"
        }
      }
    }
  ]
};

// 雷达图示例数据
export const radarChartData = {
  tooltip: {},
  legend: {
    orient: "vertical",
    left: 10,
    top: "top",
    textStyle: {
      color: "#ffffff"
    }
  },
  radar: {
    indicator: [
      { name: "销售", max: 6500 },
      { name: "管理", max: 16000 },
      { name: "技术", max: 30000 },
      { name: "客服", max: 38000 },
      { name: "研发", max: 52000 },
      { name: "市场", max: 25000 }
    ],
    axisName: {
      textStyle: {
        color: "#ffffff"
      }
    }
  },
  textStyle: {
    color: "#ffffff"
  },
  series: [
    {
      type: "radar",
      data: [
        {
          value: [4200, 10000, 20000, 35000, 50000, 18000],
          name: "ET9",
          areaStyle: {
            color: "rgba(255, 0, 135, 0.2)"
          },
          lineStyle: {
            color: "#ff0087"
          }
        },
        {
          value: [5000, 14000, 28000, 26000, 42000, 21000],
          name: "ET7",
          areaStyle: {
            color: "rgba(46, 199, 201, 0.2)"
          },
          lineStyle: {
            color: "#2ec7c9"
          }
        },
        {
          value: [4000, 10000, 25000, 28000, 32000, 30000],
          name: "ET5",
          areaStyle: {
            color: "rgba(240, 105, 57, 0.2)"
          },
          lineStyle: {
            color: "#f06939"
          }
        }
      ]
    }
  ]
};

// 散点图示例数据
export const scatterChartData = {
  xAxis: {},
  yAxis: {},
  series: [
    {
      type: "scatter",
      data: [
        [10, 8.04],
        [8, 6.95],
        [13, 7.58],
        [9, 8.81],
        [11, 8.33],
        [14, 9.96],
        [6, 7.24],
        [4, 4.26],
        [12, 10.84],
        [7, 4.82],
        [5, 5.68]
      ],
      symbolSize: 20,
      itemStyle: {
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 1,
          y2: 1,
          colorStops: [
            { offset: 0, color: "#7ec2f3" },
            { offset: 1, color: "#2d8cf0" }
          ]
        }
      }
    }
  ]
};

// 漏斗图示例数据
export const funnelChartData = {
  tooltip: {
    trigger: "item",
    formatter: "{a} <br/>{b} : {c}%"
  },
  series: [
    {
      name: "转化率",
      type: "funnel",
      left: "10%",
      top: 60,
      bottom: 60,
      width: "80%",
      min: 0,
      max: 100,
      minSize: "0%",
      maxSize: "100%",
      sort: "descending",
      gap: 2,
      label: {
        show: true,
        position: "inside"
      },
      labelLine: {
        length: 10,
        lineStyle: {
          width: 1,
          type: "solid"
        }
      },
      itemStyle: {
        borderColor: "#fff",
        borderWidth: 1
      },
      emphasis: {
        label: {
          fontSize: 20
        }
      },
      data: [
        { value: 100, name: "浏览量" },
        { value: 80, name: "点击量" },
        { value: 60, name: "咨询量" },
        { value: 40, name: "订单量" },
        { value: 20, name: "成交量" }
      ]
    }
  ]
};

// 仪表盘示例数据
export const gaugeChartData = {
  series: [
    {
      type: "gauge",
      startAngle: 180,
      endAngle: 0,
      min: 0,
      max: 100,
      radius: "100%",
      center: ["50%", "75%"],
      progress: {
        show: true,
        clip: false,
        width: 10,
        roundCap: true,
        itemStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              { offset: 0, color: "#5470c6" },
              { offset: 1, color: "#91cc75" }
            ]
          }
        }
      },
      pointer: {
        icon: "path://M2090.36389,615.30999 L2090.36389,615.30999 C2091.48372,615.30999 2092.40383,616.23010 2092.40383,617.34993 L2092.40383,617.34993 C2092.40383,618.46975 2091.48372,619.38987 2090.36389,619.38987 L2090.36389,619.38987 C2089.24406,619.38987 2088.32395,618.46975 2088.32395,617.34993 L2088.32395,617.34993 C2088.32395,616.23010 2089.24406,615.30999 2090.36389,615.30999 Z",
        length: "75%",
        width: 6,
        offsetCenter: [0, "10%"]
      },
      axisLine: {
        roundCap: true,
        lineStyle: {
          width: 10
        }
      },
      axisTick: {
        splitNumber: 5,
        lineStyle: {
          width: 2,
          color: "#999"
        }
      },
      splitLine: {
        length: 12,
        lineStyle: {
          width: 3,
          color: "#999"
        }
      },
      axisLabel: {
        distance: 20,
        color: "#999",
        fontSize: 14
      },
      title: {
        show: true,
        offsetCenter: [0, "30%"],
        fontSize: 20,
        color: "#666"
      },
      detail: {
        backgroundColor: "#fff",
        borderColor: "#999",
        borderWidth: 2,
        width: 60,
        height: 30,
        offsetCenter: [0, "-25%"],
        valueAnimation: true,
        formatter: "{value}%",
        color: "auto"
      },
      data: [
        {
          value: 78,
          name: "完成率"
        }
      ]
    }
  ]
};

// 多折线图示例数据
export const crossChartData = {
  color: ["#80FFA5", "#00DDFF", "#37A2FF", "#FF0087", "#FFBF00"],
  title: {
    text: "Gradient Stacked Area Chart"
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#6a7985"
      }
    }
  },
  legend: {
    data: ["Line 1", "Line 2", "Line 3", "Line 4", "Line 5"]
  },
  toolbox: {
    feature: {
      saveAsImage: {}
    }
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: false,
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
    }
  ],
  yAxis: [
    {
      type: "value"
    }
  ],
  series: [
    {
      name: "Line 1",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      emphasis: {
        focus: "series"
      },
      data: [140, 232, 101, 264, 90, 340, 250]
    },
    {
      name: "Line 2",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      emphasis: {
        focus: "series"
      },
      data: [120, 282, 111, 234, 220, 340, 310]
    },
    {
      name: "Line 3",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      emphasis: {
        focus: "series"
      },
      data: [320, 132, 201, 334, 190, 130, 220]
    },
    {
      name: "Line 4",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      emphasis: {
        focus: "series"
      },
      data: [220, 402, 231, 134, 190, 230, 120]
    },
    {
      name: "Line 5",
      type: "line",
      stack: "Total",
      smooth: true,
      lineStyle: {
        width: 0
      },
      showSymbol: false,
      label: {
        show: true,
        position: "top"
      },
      emphasis: {
        focus: "series"
      },
      data: [220, 302, 181, 234, 210, 290, 150]
    }
  ]
};

// 水银球-菱形
export const liquidfillChartData = {
  series: [
    {
      type: "liquidFill",
      data: [0.6, 0.55, 0.4, 0.25],
      shape: "diamond",
      radius: "60%",
      titltStyle: {
        align: "center"
      },
      outline: {
        show: false
      },
      backgroundStyle: {
        borderColor: "#156ACF",
        borderWidth: 1,
        shadowColor: "rgba(0, 0, 0, 0.4)",
        shadowBlur: 20
      },

      label: {
        align: "center",
        baseline: "middle",
        position: "inside",
        // formatter: function () {
        //   return "100";
        // },
        fontSize: 40,
        color: "#D94854"
      }
    }
  ]
};

// 水银球-圆形
export const liquidfillCircleData = {
  series: [
    {
      type: "liquidFill",
      data: [0.6, 0.55, 0.4, 0.25],
      shape: "circle",
      radius: "70%",
      titltStyle: {
        align: "center"
      },
      outline: {
        show: false
      },
      backgroundStyle: {
        borderColor: "#156ACF",
        borderWidth: 1,
        shadowColor: "rgba(0, 0, 0, 0.4)",
        shadowBlur: 20
      },

      label: {
        align: "center",
        baseline: "middle",
        position: "inside",
        // formatter: function () {
        //   return "100";
        // },
        fontSize: 40,
        color: "#D94854"
      }
    }
  ]
};

//map地图示例
export const mapChartData = {
  //地图组件
  geo: {
    map: "china",
    roam: true, //鼠标缩放大小和移动
    zoom: 1.8, // 增加缩放比例
    //地图布局调整
    left: "center", // 水平居中
    top: 170, // 垂直居中
    right: "auto",
    bottom: 1,
    //地图的文字设置
    label: {
      show: true,
      color: "white",
      fontSize: 14
    },
    itemStyle: {
      //线性渐变
      color: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "#7ce7fd" // 0% 处的颜色
          },
          {
            offset: 1,
            color: "blue" // 100% 处的颜色
          }
        ],
        global: false // 缺省为 false
      }
    },
    emphasis: {
      itemStyle: {
        color: "blue"
      },
      label: {
        fontSize: 40
      }
    }
  },
  legend: {},
  //布局位置
  grid: {
    left: 0,
    top: 0,
    right: 0,
    bottom: 0
  },
  series: [
    {
      type: "lines", //航线
      data: [
        {
          coords: [
            [116.405285, 39.904989], //起点：北京
            [119.306239, 26.075302] //终点：福建省
          ],
          lineStyle: {
            color: "white",
            curveness: 0.3
          }
        },
        {
          coords: [
            [116.405285, 39.904989], //起点：北京
            [114.298572, 30.584355] //终点：湖北
          ],
          lineStyle: {
            color: "white",
            curveness: 0.3
          }
        },
        {
          coords: [
            [116.405285, 39.904989], //起点：北京
            [91.132212, 29.660361] //终点：西藏
          ],
          lineStyle: {
            color: "white",
            curveness: 0.3
          }
        },
        {
          coords: [
            [116.405285, 39.904989], //起点：北京
            [102.712251, 25.040609] //终点：云南
          ],
          lineStyle: {
            color: "white",
            curveness: 0.3
          }
        },
        {
          coords: [
            [116.405285, 39.904989], //起点：北京
            [113.280637, 23.125178] //终点：广东
          ],
          lineStyle: {
            color: "white",
            curveness: 0.3
          }
        },
        {
          coords: [
            [116.405285, 39.904989], //起点：北京
            [108.320004, 22.82402] //终点：广西
          ],
          lineStyle: {
            color: "white",
            curveness: 0.3
          }
        },
        {
          coords: [
            [113.280637, 23.125178], //起点：广东
            [101.778916, 36.623178] //终点：青海省
          ],
          lineStyle: {
            color: "white",
            curveness: 0.3
          }
        },
        {
          coords: [
            [113.280637, 23.125178], //起点：广东
            [87.617733, 43.792818] //终点：新疆
          ],
          lineStyle: {
            color: "white",
            curveness: 0.3
          }
        },
        {
          coords: [
            [87.617733, 43.792818], //起点：新疆
            [113.280637, 23.125178] //终点：广东
          ],
          lineStyle: {
            color: "white",
            curveness: 0.3
          }
        },
        {
          coords: [
            [108.320004, 22.82402], //起点：广西
            [113.280637, 23.125178] //终点：广东
          ],
          lineStyle: {
            color: "white",
            curveness: 0.3
          }
        },
        {
          coords: [
            [113.280637, 23.125178], //终点：广东
            [126.642464, 45.756967] //终点：黑龙江
          ],
          lineStyle: {
            color: "white",
            curveness: 0.3
          }
        },
        {
          coords: [
            [126.642464, 45.756967], //终点：黑龙江
            [113.280637, 23.125178] //终点：广东
          ],
          lineStyle: {
            color: "white",
            curveness: 0.3
          }
        },
        {
          coords: [
            [113.280637, 23.125178], //终点：广东
            [121.509062, 25.044332] //终点：台湾
          ],
          lineStyle: {
            color: "white",
            curveness: 0.3
          }
        },
        {
          coords: [
            [116.405285, 39.904989], //终点：北京
            [121.509062, 25.044332] //终点：台湾
          ],
          lineStyle: {
            color: "white",
            curveness: 0.3
          }
        },
        {
          coords: [
            [120.971485, 23.749452], //终点：台湾
            [119.306239, 26.075302] //终点：福建
          ],
          lineStyle: {
            color: "white",
            curveness: 0.3
          }
        },
        {
          coords: [
            [119.306239, 26.075302], //终点：福建
            [120.971485, 23.749452] //终点：台湾
          ],
          lineStyle: {
            color: "white",
            curveness: 0.3
          }
        },
        {
          coords: [
            [119.306239, 26.075302], //终点：福建
            [109.754859, 19.189767] //终点：海南
          ],
          lineStyle: {
            color: "white",
            curveness: 0.3
          }
        }
      ],
      //统一线特效的配置
      effect: {
        show: true,
        period: 10, //特效动画的时间，单位为 s
        symbol:
          "path://M599.06048 831.309824l12.106752-193.404928 372.860928 184.430592L984.02816 710.206464 617.906176 367.33952 617.906176 151.638016c0-56.974336-46.188544-143.064064-103.158784-143.064064-56.974336 0-103.158784 86.089728-103.158784 143.064064L411.588608 367.33952 45.461504 710.206464l0 112.129024 366.660608-184.430592 14.999552 209.27488c0 5.05344 0.594944 9.892864 1.124352 14.749696l-66.591744 60.348416 0 66.587648 153.986048-50.879488 2.43712-0.80896 147.439616 51.688448 0-66.587648-68.758528-62.253056L599.06048 831.309824z",
        symbolSize: 20,
        roundTrip: true, //是否原路返回
        trailLength: 0 //特效尾迹的长度,数值0~1
      }
    }
  ]
};

const categories = (function () {
  let now = new Date();
  const res = [];
  let len = 10;
  while (len--) {
    res.unshift(now.toLocaleTimeString().replace(/^\D*/, ""));
    now = new Date(+now - 2000);
  }
  return res;
})();
const categories2 = (function () {
  const res = [];
  let len = 10;
  while (len--) {
    res.push(10 - len - 1);
  }
  return res;
})();
const data = (function () {
  const res = [];
  let len = 10;
  while (len--) {
    res.push(Math.round(Math.random() * 1000));
  }
  return res;
})();
const data2 = (function () {
  const res = [];
  let len = 0;
  while (len < 10) {
    res.push(+(Math.random() * 10 + 5).toFixed(1));
    len++;
  }
  return res;
})();

// 动态饼图和线图示例数据
export const pieLineChartData = {
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
      label: {
        backgroundColor: "#283b56"
      }
    }
  },
  legend: {
    textStyle: {
      color: "#ffffff"
    }
  },
  toolbox: {
    show: true,
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {}
    }
  },
  dataZoom: {
    show: false,
    start: 0,
    end: 100
  },
  xAxis: [
    {
      type: "category",
      boundaryGap: true,
      data: categories
    },
    {
      type: "category",
      boundaryGap: true,
      data: categories2
    }
  ],
  yAxis: [
    {
      type: "value",
      scale: true,
      name: "Price",
      max: 30,
      min: 0,
      boundaryGap: [0.2, 0.2]
    },
    {
      type: "value",
      scale: true,
      name: "Order",
      max: 1200,
      min: 0,
      boundaryGap: [0.2, 0.2]
    }
  ],
  series: [
    {
      color: "#1890ff",
      name: "曝光量",
      type: "bar",
      xAxisIndex: 1,
      yAxisIndex: 1,
      data: data,
      label: {
        show: true
      }
    },
    {
      name: "温保预测量",
      type: "line",
      data: data2
    }
  ]
};
